<template>
  <div class="Xseats">
    <div class="Xseats-wrap">
      <div class="Xseats-steps">
        <Steps :activeindex="2"></Steps>
      </div>
      <div class="Xseats-main">
        <div class="seats">
          <Seats></Seats>
        </div>
        <div class="movie">
          <div class="movie-pic-wrap">
            <div class="movie-pic">
              <img width="115" height="160"
                   :src="movie.imgUrl"
              />
            </div>
            <div class="movie-pic-msg">
              <div class="movie-pic-msg-title">{{ movie.movieName }}</div>
              <p>类型：<span>爱情</span></p>
              <p>时长：<span>102分钟</span></p>
            </div>
          </div>
          <div class="movie-info-wrap">
            <div>影院：<span>万达影城</span></div>
            <div>影厅：<span>5号儿童厅</span></div>
            <div>版本：<span>国语2D</span></div>
            <div>场次：<span class="redcolor">今天 12月21 20:10</span></div>
            <div>
              票价：<span>￥{{ salaTime.moviePrice }}/张</span>
            </div>
          </div>
          <div class="movie-seat-wrap">
            <div class="movie-noseat" v-show="!xseatFlag">
              <p>座位：一次最多选6个座位</p>
              <p>请<span>点击左侧</span>座位图选择座位</p>
            </div>
            <div class="movie-hasseat" v-show="xseatFlag">
              <p>座位：</p>
              <div class="movie-seat-tag-wrap">
<!--                <el-tag-->
<!--                    v-for="tag in dynamicTags"-->
<!--                    :key="tag"-->
<!--                    closable-->
<!--                    type="danger"-->
<!--                    @close="handleClose(tag)"-->
<!--                >-->
<!--                  {{ tag }}-->
<!--                </el-tag>-->
              </div>
            </div>
            <div class="movie-seat-price">
              <span>总价：</span>
              <span>￥</span>
              <span>{{ totalPrice }}</span>
            </div>
          </div>
          <div class="movie-phone-wrap">
            <p v-show="isLogin">手机号：<span>159****5519</span></p>
            <div :class="{ focusInp: focusInpPhone }" v-show="!isLogin">
              <input
                  v-model="phone"
                  type="text"
                  placeholder="输入手机号"
                  maxlength="11"
                  @focus="focusInpPhone = true"
                  @blur="focusInpPhone = false"
                  @input="getPhone"
              />
            </div>
            <div :class="{ focusInp: focusInpVerify }" v-show="!isLogin">
              <input
                  type="text"
                  placeholder="填写验证码"
                  maxlength="6"
                  @focus="focusInpVerify = true"
                  @blur="focusInpVerify = false"
              />
              <button :class="{ activeBtn: activeBtnFlag }">
                获取验证码
              </button>
            </div>
            <div
                :class="['XseatBtn', xseatFlag ? 'confirmXseatBtn' : '']"
                @click="toOrder"
            >
              确认选座
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Seats from "@/views/Seat/seats/Seats.vue";
import Steps from "@/views/Seat/seats/Steps.vue";
import {getMovieById} from './api/index.js'
import {onBeforeMount, ref,provide} from "vue";
import {useRoute} from "vue-router";
import {getSaLaById} from "@/views/SaLa/api/index.js";
// 获取路由参数并加载座位信息
const route = useRoute();
const movie =ref(null)
const salaTime=ref(null)
const totalPrice=ref(0)
const getMovie=async (id,salaTimeId)=>{
  movie.value=await getMovieById(id)
  salaTime.value=await getSaLaById(salaTimeId)
}
const changeTotalPrice=(num)=>{
  totalPrice.value=salaTime.value.moviePrice*num
}
provide('changeTotalPrice', { changeTotalPrice });
onBeforeMount(()=>{
 let salaTimeId=route.params.salaTimeId
 let id=route.params.movieId
  getMovie(id,salaTimeId)
})
</script>

<style lang="scss" scoped>
.Xseats {
  margin-top: 80px;
  overflow: hidden;
}

.Xseats-wrap {
  width: 1200px;
  margin: 0 auto;

  .Xseats-steps {
    height: 60px;
    margin: 40px 0;
  }

  .Xseats-main {
    width: 1200px;
    border: 1px solid #e5e5e5;
    display: flex;
    margin-bottom: 50px;

    .seats {
      width: 820px;
    }

    .movie {
      width: 340px;
      padding: 20px;
      background-color: #f9f9f9;

      .movie-pic-wrap {
        display: flex;

        .movie-pic {
          width: 115px;
          height: 158px;
          margin-right: 20px;
          border: 2px solid #fff;
          box-shadow: 0 2px 7px 0 hsla(0, 0%, 53%, 0.5);
          float: left;
        }

        .movie-pic-msg {
          .movie-pic-msg-title {
            font-size: 20px;
            font-weight: 700;
            color: #333;
            margin: 0 0 10px;
          }

          p {
            font-size: 12px;
            color: #999;
            height: 19px;
            line-height: 19px;

            span {
              color: #151515;
            }
          }
        }
      }

      .movie-info-wrap {
        margin-top: 20px;

        div {
          font-size: 14px;
          color: #999;
          margin-bottom: 9px;

          span {
            color: #151515;
          }

          .redcolor {
            color: red;
          }
        }
      }

      .movie-seat-wrap {
        padding: 20px 0 10px;
        border-top: 1px dashed #e5e5e5;
        border-bottom: 1px dashed #e5e5e5;

        .movie-noseat {
          p {
            &:first-child {
              font-size: 14px;
              color: #999;
            }

            &:last-child {
              font-size: 14px;
              color: #333;
              text-align: center;
              margin: 28px 0 39px;

              span {
                color: red;
              }
            }
          }
        }

        .movie-hasseat {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 20px;

          p {
            width: 43px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #999;
          }

          .movie-seat-tag-wrap {
            width: 297px;
            display: flex;
            flex-wrap: wrap;

            ::v-deep .el-tag {
              margin-right: 10px;
              margin-bottom: 10px;
            }
          }
        }

        .movie-seat-price {
          span {
            &:first-child {
              font-size: 14px;
              color: #333;
            }

            &:nth-child(2) {
              font-size: 14px;
              color: red;
            }

            &:last-child {
              color: #f03d37;
              font-size: 24px;
            }
          }
        }
      }

      .movie-phone-wrap {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 25px;

        p {
          color: #999;
          font-size: 14px;

          span {
            color: #151515;
          }
        }

        div {
          width: 218px;
          height: 40px;
          padding: 0 20px;
          margin: 5px 0;
          border: 1px solid #e5e5e5;
          background-color: #fff;
          border-radius: 20px;
          position: relative;

          input {
            border: 0;
            outline: none;
            height: 40px;
            color: #333;
            font-size: 14px;
          }

          button {
            height: 40px;
            background-color: #fff;
            border: 0;
            outline: none;
            position: absolute;
            right: 20px;
            color: #ccc;
            font-size: 14px;
          }

          .activeBtn {
            color: red;
            cursor: pointer;
          }
        }

        .focusInp {
          border-color: red;
        }

        .XseatBtn {
          background-color: #dedede;
          color: #fff;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          border: 0;
          margin-top: 40px;
        }

        .confirmXseatBtn {
          box-shadow: 0 2px 10px -2px #f03d37;
          background-color: #f03d37;
        }
      }
    }
  }
}

</style>